<template>
  <div class="article-browser">
    <div class="article">
      <div class="header">
        <h1>{{title}}</h1>
        <div class="info">
          <span>创建日期:{{gmt_create}}</span>
          <span>更新日期:{{gmt_modified}}</span>
          <span>分类:{{class_id}}</span>
          <span>标签:{{tag_ids}}</span>
        </div>
      </div>
      <div class="text">
        <p>{{blog_content}}</p>
      </div>
      <div class="footer">
        <el-button type="primary" icon="el-icon-magic-stick">赞</el-button>
        <el-button type="primary" icon="el-icon-star-on">收藏</el-button>
      </div>
    </div>
    <div class="comment">
      <comment-sender></comment-sender>
      <comment-lister></comment-lister>
    </div>
  </div>
</template>

<script>
import CommentSender from '@/components/comment/CommentSender'
import CommentLister from '@/components/comment/CommentLister'

export default {
  name: 'ArticleBrowser',
  components: {
    CommentLister, CommentSender
  },
  data () {
    return {
      title: 'Hello,world!',
      gmt_create: '2018-12-15 10:22:53',
      gmt_modified: '2020-6-12 12:43:15',
      blog_content: 'Arosj kasdfh sklaj a js asf h oifq ohoiasf loqmzxcno sqjnjshsdhh kskjaghfqo hshs8 ushqk ahiqsbs shf asdhkasfkagsf ashd jsdh lad alsdh skhdahl hoqjsdh kzolysl lkoqu kakiuasfkaoq ishasj ashdasu shshshj shsh hkasoqm oisloialks 8shbs 9js sj 7js loqmzxcno sqjnjshsdhh kskjaghfqo hshs8 ushqk ahiqsb 8shbs 9js sj 7js loqmzxcno sqjnjshsdhh kskjaghfqo hshs8 ushqk ahiqsb 8shbs 9js sj 7js loqmzxcno sqjnjshsdhh kskjaghfqo hshs8 ushqk ahiqsb 8shbs 9js sj 7js loqmzxcno sqjnjshsdhh kskjaghfqo hshs8 ushqk ahiqsb 8shbs 9js sj 7js loqmzxcno sqjnjshsdhh kskjaghfqo hshs8 ushqk ahiqsb 8shbs 9js sj 7js loqmzxcno sqjnjshsdhh kskjaghfqo hshs8 ushqk ahiqsb 8shbs 9js sj 7js',
      class_id: '日志',
      tag_ids: ['编程', 'js', 'Vue']
    }
  }
}
</script>

<style scoped>
  h1 {
    margin-bottom: 0.5rem;
  }

  .header span {
    font-size: 0.8rem;
    color: #888;
    margin-left: 2rem;
  }
</style>
